<template>
  <view :class="lis.length > 0 ? 'bg' : 'bg-1'" class="productsLists">
    <view class="lists" v-if="lis.length > 0">
      <template v-if="isArrange">
        <view
          @click="toDetail(item.goods_id)"
          class="product"
          v-for="(item, index) in lis"
          :key="index"
        >
          <view v-if="item.promotion_type == 'groupbuy'" class="zk">抢购 </view>
          <view v-if="item.promotion_type == 'xianshi'" class="zk"
            >限时折扣</view
          >
          <view v-if="item.promotion_type == 'miaosha'" class="zk">秒杀</view>
          <view v-if="item.promotion_type == 'zhijiang'" class="zk">直降</view>
          <view v-if="item.promotion_type == 'teijia'" class="zk">特价</view>
          <view v-if="item.promotion_type == 'repur'" class="zk"
            >满额加价购</view
          >
          <view v-if="item.promotion_type == 'spellgroup'" class="zk"
            >拼团</view
          >
          <view v-if="item.promotion_type == 'bargain'" class="zk">砍价</view>
          <image :src="item.goods_image_url" mode=""></image>
          <view class="ms"
            ><text class="is_tv" v-if="item.is_tv == 1">自营</text
            >{{ item.goods_name }}</view
          >
          <view
            class="uni-goods-class"
            v-for="(item1, index1) in item.labels_names"
            :key="index1"
          >
            <view class="uni-class-1"
              ><span>{{ item1 }}</span></view
            >
          </view>
          <!-- <view class="uni-good-price">￥{{item.goods_price}}</view> -->
          <view v-if="member_id" style="display: flex; align-items: end">
            <text class="uni-good-price"
              >￥{{ item.goods_promotion_price }}</text
            >
            <text
              v-if="item.tm_price > 0 && physical_info.is_price == 1"
              style="
                text-decoration: line-through;
                font-size: 12px;
                color: #999;
                margin-top: 24upx;
              "
              >￥{{ item.tm_price }}</text
            >
          </view>
          <view style="display: flex; align-items: end" v-else>
            <text class="uni-good-price">￥{{ "登录查看价格" }}</text>
          </view>
          <view class="uni-goods-num">
            <!-- <view class="uni-goods-stock">库存：2363</view> -->
            <view class="uni-goods-volume">销量：{{ item.goods_salenum }}</view>
          </view>
          <!-- <view style="display: flex;justify-content: space-between;" class="lastLine">
						<text class="lastLine1">￥{{item.goods_price}}</text>
						<text>
							<text class="lastLine2">销量：{{item.goods_salenum}}</text>
							<text @click="toStore(item.store_id)" class="lastLine3">进店</text>
						 </text>
					</view> -->
        </view>
      </template>
      <template v-else>
        <view
          @click="toDetail(item.goods_id)"
          class="goodsbox"
          v-for="(item, index) in lis"
          :key="index"
        >
          <view v-if="item.promotion_type == 'groupbuy'" class="goods1"
            >抢购
          </view>
          <view v-if="item.promotion_type == 'xianshi'" class="goods1"
            >限时折扣</view
          >
          <view v-if="item.promotion_type == 'miaosha'" class="goods1"
            >秒杀</view
          >
          <view v-if="item.promotion_type == 'zhijiang'" class="goods1"
            >直降</view
          >
          <view v-if="item.promotion_type == 'teijia'" class="goods1"
            >特价</view
          >
          <view v-if="item.promotion_type == 'repur'" class="goods1"
            >满额加价购</view
          >
          <view v-if="item.promotion_type == 'spellgroup'" class="goods1"
            >拼团</view
          >
          <view v-if="item.promotion_type == 'bargain'" class="goods1"
            >砍价</view
          >
          <image :src="item.goods_image_url" class="goodsimg" mode=""></image>
          <view class="goodslist">
            <view class="goods2">
              <text class="is_tv" v-if="item.is_tv == 1">自营</text
              >{{ item.goods_name }}
            </view>
            <view v-if="member_id" style="display: flex; align-items: end">
              <text class="goods4">￥{{ item.goods_promotion_price }}</text>
              <text
                v-if="item.tm_price > 0 && physical_info.is_price == 1"
                style="
                  text-decoration: line-through;
                  font-size: 12px;
                  color: #999;
                  margin-top: 24upx;
                "
                >￥{{ item.tm_price }}</text
              >
            </view>
            <view style="display: flex; align-items: end" v-else>
              <text class="goods4">￥{{ "登录查看价格" }}</text>
            </view>
            <!-- <text class="goods4">￥{{item.goods_price}}</text> -->
            <view class="goods3">
              <text class="goods5">销量：{{ item.goods_salenum }}</text>
              <!-- <text @click="toStore(item.store_id)" class="goods6">进店</text> -->
            </view>
          </view>
        </view>
      </template>

      <view class="top">
        <view @click="sortType(0)" :class="flag01 == true ? 'active11' : 'C333'"
          >综合</view
        >

        <view @click="sortType(1)" v-if="flag11 && sort_type < 4">
          <text>销量</text>
          <image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>
        </view>
        <view @click="sortType(1)" v-if="flag12 && sort_type < 4">
          <text class="active11">销量</text>
          <image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>
        </view>
        <view @click="sortType(1)" v-if="flag13 && sort_type < 4">
          <text class="active11">销量</text>
          <image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>
        </view>
        <view @click="sortType(2)" v-if="flag21 && sort_type < 4">
          <text>价格</text>
          <image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>
        </view>
        <view @click="sortType(2)" v-if="flag22 && sort_type < 4">
          <text class="active11">价格</text>
          <image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>
        </view>
        <view @click="sortType(2)" v-if="flag23 && sort_type < 4">
          <text class="active11">价格</text>
          <image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>
        </view>
        <view class="arrangebox" @click="changeArrange">
          <image
            v-if="isArrange"
            class="arrange1"
            :src="`${picUrl}/jh/ver.png`"
            mode="widthFix"
          >
          </image>
          <image
            v-else
            class="arrange1"
            :src="`${picUrl}/jh/hor.png`"
            mode="widthFix"
          ></image>
        </view>
        <view class="tap-name" @click="sortBox()" v-if="isOk">筛选</view>
      </view>

      <view
        @tap="hidden()"
        v-if="isOk"
        @touchmove.stop.prevent="moveHandle"
        class="sxMask"
      >
        <view @tap.stop class="innerMask">
          <view class="innerMaskTop">
            <text
              >筛选<image
                class="sx"
                src="../static/images/sx.jpg"
                mode=""
              ></image
            ></text>
          </view>
          <!-- <view class="innerMaskCenter"> -->
          <scroll-view scroll-y="true" class="innerMaskCenter">
            <view v-for="(item, index11) in attr_list" :key="index11">
              <view class="innerMaskCenterT mt">
                <text class="fl fs18 bold">{{ item.name }}</text>
              </view>
              <view class="pplis">
                <text
                  :class="{
                    active1: checkGoods[index11] == item2.attr_value_id,
                  }"
                  v-for="(item2, index3) in item.value"
                  @click="activeColor3(index11, index3)"
                  :key="index3"
                  class="ppli"
                  >{{ item2.attr_value_name }}</text
                >
              </view>
            </view>

            <view style="" class="innerMaskCenterT mt">
              <text class="fl fs18 bold">品牌</text>
              <!-- <text class="fr fs18 C999">全部<image class="xj" src="../static/images/xj.jpg" mode=""></image></text> -->
            </view>
            <view style="" class="ppfllis">
              <text
                :class="[active2 == index ? 'active1' : '']"
                @click="activeColor2(index, item.brand_id)"
                v-for="(item, index) in brand_list"
                :key="index"
                class="ppflli"
              >
                {{ item.brand_name }}
              </text>
            </view>
          </scroll-view>
          <!-- </view> -->
          <view class="innerMaskBottom">
            <button @click="reset()" class="fl innerMaskBottom1">重置</button>
            <button @click="ok()" class="fr innerMaskBottom2">确定</button>
          </view>
        </view>
      </view>
    </view>

    <view class="" v-if="lis.length <= 0">
      <image
        :src="`${picUrl}/InfoNull.png`"
        style="width: 750rpx; height: 800rpx"
        mode="widthFix"
      ></image>
    </view>
    <go-top :isShow="isShow"></go-top>
  </view>
</template>

<script>
import goTop from "@/components/go-top/go-top.vue";
export default {
  components: {
    goTop,
  },
  data() {
    return {
      physical_info: {},
      isOk: false,
      key: "",
      order: "",
      brand_list: [],
      goods_spec: [],
      checkGoods: [],
      attr_list: [],
      curpage: 1,
      hasmore: false,
      // priceRange: [],
      PPID: "",
      searchValue: "",
      keyword: "",
      firstid: "",
      secondid: "",
      thirdid: "",
      active1: 0,
      active3: 0,
      active2: 0,
      flag1: false,
      flag01: true,
      xlNum: 0,
      jgNum: 0,
      flag11: true, //销量
      flag12: false,
      flag13: false,
      flag21: true, //价格
      flag22: false,
      flag23: false,
      pplis: [],
      pplisLong: 16,
      // minPrice:0,
      // maxPrice:100,
      pinpaiId: "",
      ppfllis: [],
      isArrange: true,
      lis: [],
      sort_type: 0,
      isShow: false,
      member_id: null,
    };
  },
  onPageScroll(res) {
    if (res.scrollTop > 200) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  onReachBottom() {
    if (this.hasmore) {
      this.curpage++;
      this.getLis();
    } else {
      uni.showToast({
        title: "没有更多数据了",
        icon: "none",
      });
    }
  },
  onLoad(options) {
    this.PPID = options.PPID;
    if (this.PPID == undefined) {
      this.PPID = 0;
    }
    var title = options.index;
    if (title == "null" || title == undefined) {
      title = " ";
    }
    if (options.keyword) {
      this.keyword = options.keyword;
      title = options.keyword;
    }
    this.firstid = options.firstid;
    this.secondid = options.secondid;
    this.thirdid = options.thirdid;
    if (options.sort_type) {
      this.sort_type = options.sort_type;
    }
    if (options.order) {
      this.order = options.order;
    }
    this.getLis();
    uni.setNavigationBarTitle({
      title: title || "商品列表",
    });
  },
   onShow() {
    setTimeout(() => {
      this.member_id = uni.getStorageSync("api_member_id");
    }, 100);
  },
  methods: {
    changeArrange() {
      this.isArrange = !this.isArrange;
    },
    toStore(id) {
      uni.navigateTo({
        url: "/mall/store/store?store_id=" + id,
      });
    },
    ok() {
      var that = this;
      this.$util
        .request({
          url: "/mobile/index.php?act=goods&op=goods_list",
          method: "get",
          data: {
            b_id: that.PPID,
            gc_id: that.thirdid,
            share_phyid: 41,
            // "price_from":that.minPrice,
            // "price_to":that.maxPrice
          },
        })
        .then(function (res) {
          that.lis = res.datas.goods_list;
          that.physical_info = res.datas.physical_info;
          that.flag1 = false;
          if (res.datas.goods_list.length == 0) {
            uni.showToast({
              title: "没有相关商品",
              icon: "none",
            });
          }
        });
    },
    reset() {
      // this.pinpaiId="";
      // this.minPrice="";
      // this.maxPrice="";
      this.active2 = "";
      this.active1 = "";
    },
    sortBox() {
      this.flag1 = !this.flag1;
      var that = this;
      //品牌列表
      this.$util
        .request({
          url: "/mobile/index.php?act=brand&op=list",
          method: "get",
          data: {
            class_id: that.thirdid,
          },
        })
        .then(function (res) {
          console.log(res);
          that.pplis = res.datas;
        });
    },
    toDetail(id) {
      console.log(id);
      uni.navigateTo({
        url: "/mall/goods/info?goods_id=" + id,
      });
    },
    getLis() {
      var that = this;
      if (!this.PPID) {
        this.PPID = 0;
      }
      if (!this.thirdid) {
        this.thirdid = 0;
      }
      console.log(this.keyword);
      this.$util
        .request({
          url: "/mobile/index.php?act=goods&op=goods_list",
          method: "get",
          data: {
            curpage: this.curpage,
            b_id: this.PPID,
            gc_id: this.thirdid,
            keyword: this.keyword,
            sort_type: this.sort_type,
            order: this.order,
            share_phyid: 41,
          },
        })
        .then(function (res) {
          if (res.error_code == 0) {
            that.hasmore = res.datas.paged.hasmore;
            that.physical_info = res.datas.physical_info;
            that.lis = that.lis.concat(res.datas.goods_list);
            if (that.lis.length == 0) {
              uni.showToast({
                title: "没有相关商品",
                icon: "none",
              });
              return;
            }
            that.attr_list = res.datas.attr_list;
            for (let i = 0; i < res.datas.brand_list.length; i++) {
              that.brand_list = that.brand_list.concat(res.datas.brand_list[i]);
            }
            // that.priceRange = res.datas.attr_list[0].value
            that.attr_list.map((item, index) => {
              that.goods_spec.push([]);
              item.value.map((arr) => {
                that.goods_spec[index].push(arr.attr_value_id);
              });
            });
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    // 缺少三级分类接口
    getProducts() {
      var that = this;
      this.$util
        .request({
          url: "/mobile/index.php?act=goods_class&op=getAllClass",
          method: "get",
          data: {},
        })
        .then(function (res) {
          var aa = res.datas.goods_class;
          for (var i = 0; i < aa.length; i++) {
            if ((aa[i].gc_id = that.firstid)) {
              var bb = aa[i].class2;
              for (var j = 0; j < bb.length; j++) {
                if ((bb[j].gc_id = that.secondid)) {
                  var cc = bb[j].class3;
                  console.log(cc);
                }
              }
            }
          }
        });
    },
    activeColor(index, id) {
      this.pinpaiId = id;
      this.active1 = index;
    },
    activeColor2(index, id) {
      this.active2 = index;
      this.PPID = id;
    },
    activeColor3(index1, index2) {
      this.checkGoods.splice(index1, 1, this.goods_spec[index1][index2]);
    },
    hidden() {
      this.flag1 = !this.flag1;
    },
    sortType(index) {
      this.curpage = 1;
      var that = this;
      if (index == 0) {
        this.flag01 = true;
        this.flag11 = true;
        this.flag12 = false;
        this.flag13 = false;
        this.flag21 = true;
        this.flag22 = false;
        this.flag23 = false;
        this.key = 4;
        this.order = 1;

        this.lis = [];
        this.getLis();
      }
      if (index == 1) {
        this.flag01 = false;
        this.flag21 = true;
        this.flag22 = false;
        this.flag23 = false;
        this.xlNum++;

        if (this.xlNum % 2 == 0) {
          console.log("销量升序");
          this.flag11 = false;
          this.flag12 = true;
          this.flag13 = false;
          this.key = 1;
          this.order = 1;
          this.sort_type = 1;
          this.$util
            .request({
              url: "/mobile/index.php?act=goods&op=goods_list",
              method: "get",
              data: {
                b_id: that.PPID,
                gc_id: that.thirdid,
                sort_type: that.sort_type,
                order: that.order,
                keyword: that.keyword,
                share_phyid: 41,
              },
            })
            .then(function (res) {
              that.lis = res.datas.goods_list;
              that.physical_info = res.datas.physical_info;
              that.hasmore = res.datas.paged.hasmore;
            });
        }
        if (this.xlNum % 2 == 1) {
          console.log("销量降序");
          this.flag11 = false;
          this.flag12 = false;
          this.flag13 = true;
          this.key = 1;
          this.order = 0;
          this.sort_type = 1;
          this.$util
            .request({
              url: "/mobile/index.php?act=goods&op=goods_list",
              method: "get",
              data: {
                b_id: that.PPID,
                gc_id: that.thirdid,
                sort_type: that.sort_type,
                order: that.order,
                keyword: that.keyword,
                share_phyid: 41,
              },
            })
            .then(function (res) {
              that.lis = res.datas.goods_list;
              that.physical_info = res.datas.physical_info;
              that.hasmore = res.datas.paged.hasmore;
            });
        }
      }
      if (index == 2) {
        this.flag01 = false;
        this.flag11 = true;
        this.flag12 = false;
        this.flag13 = false;
        this.jgNum++;

        if (this.jgNum % 2 == 0) {
          console.log("价格升序");
          this.flag21 = false;
          this.flag22 = true;
          this.flag23 = false;
          this.key = 3;
          this.order = 1;
          this.sort_type = 3;
          this.$util
            .request({
              url: "/mobile/index.php?act=goods&op=goods_list",
              method: "get",
              data: {
                b_id: that.PPID,
                gc_id: that.thirdid,
                sort_type: that.sort_type,
                order: that.order,
                keyword: that.keyword,
                share_phyid: 41,
              },
            })
            .then(function (res) {
              that.hasmore = res.datas.paged.hasmore;
              that.physical_info = res.datas.physical_info;
              that.lis = res.datas.goods_list;
            });
        }
        if (this.jgNum % 2 == 1) {
          console.log("价格降序");
          this.flag21 = false;
          this.flag22 = false;
          this.flag23 = true;
          this.key = 3;
          this.order = 0;
          this.sort_type = 3;
          this.$util
            .request({
              url: "/mobile/index.php?act=goods&op=goods_list",
              method: "get",
              data: {
                b_id: that.PPID,
                gc_id: that.thirdid,
                sort_type: that.sort_type,
                order: that.order,
                keyword: that.keyword,
                share_phyid: 41,
              },
            })
            .then(function (res) {
              that.hasmore = res.datas.paged.hasmore;
              that.lis = res.datas.goods_list;
              that.physical_info = res.datas.physical_info;
              console.log(that.lis);
            });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 	uni-page-body {
		background-color: #F5F5F5;
		color: rgb(102, 102, 102);
	} */
page {
  background-color: #f5f5f5;
}

.bg {
  background-color: #efeff4;
}

.bg-1 {
  background-color: #fff;
  height: 100%;
}

.top {
  // border-top: 3px #f5f5f5 solid;
  background-color: #ffffff;
  height: 80upx;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // padding: 0 10upx;
  position: fixed;
  top: 0;
  left: 0;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  width: 100%;
}
.top view {
  flex-grow: 1;
  text-align: center;
}

.tap-name {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #323232;
}

.top > view {
  font-size: 30upx;
}

.top image {
  width: 35upx;
  height: 35upx;
}

.arrangebox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fe0000 {
  color: #ff4300;
}

.sjx {
  position: relative;
  top: 8upx;
  width: 30upx;
  height: 30upx;
}

.lists {
  background-color: #f5f5f5;
  /* height: 100vh; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 50px 30upx;
  /* height: 100%; */
  /* min-height: 100vh; */
}

.product {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 21upx;
  width: 330upx;
  // height: 488upx;
  background-color: #fff;
}

.product image {
  width: 330upx;
  height: 330rpx;
  margin: 0 auto;
}

.zk {
  /* width: 80upx; */
  padding: 0 15upx;
  height: 40upx;
  background-color: #ff4300;
  color: #ffffff;
  text-align: center;
  line-height: 40upx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-left-radius: 10upx;
}

.ms {
  min-height: 64upx;
  text-align: left;
  padding: 0 24rpx;
  line-height: 35upx;

  font-size: 28rpx;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #333333;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.uni-goods-class {
  margin-top: 14rpx;
  padding: 0 14rpx;
  display: flex;
  justify-content: space-between;

  .uni-class-1 {
    // padding: 0 4rpx;
    border-radius: 2rpx;
    opacity: 1;
    border: 1rpx solid #e96a1d;
    font-size: 24rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #e96a1d;
    white-space: normal;
    transform: scale(0.9);
  }
}

.uni-good-price {
  margin-top: 24rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #e96a1d;
  text-align: left;
}

.uni-goods-num {
  margin: 13rpx 0 24rpx;
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;

  .uni-goods-stock {
    font-size: 24rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }

  .uni-goods-volume {
    font-size: 24rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
}

.lastLine {
  height: 30upx;
  line-height: 30upx;
  margin-top: 10upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 5px;
  padding-top: 10upx;
}

.lastLine1 {
  color: #ff4300;
  font-size: 30upx;
  /* font-size: 21upx	 */
}

.lastLine2 {
  color: #000000;
  font-size: 20upx;
  /* font-size: 12upx */
}

.lastLine3 {
  padding: 0upx 10upx;
  padding-left: 20upx;
  color: #000000;
  font-size: 27upx;
  /* font-size: 18upx */
}

/* 筛选 */
.sxMask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

.innerMask {
  width: 598upx;
  height: 1192upx;
  background-color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100000;
}

.innerMaskTop {
  padding: 0 28upx;
  height: 83upx;
  line-height: 83upx;
  background-color: #fafafa;
  font-size: 30upx;
  /* font-size: 21upx */
}

.innerMaskCenter {
  overflow-y: scroll;
  height: 1000upx;
  width: 100%;
  position: relative;
  z-index: 99999999999999999;
}

.innerMaskCenterT {
  height: 80upx;
  line-height: 80upx;
  padding: 0 28upx;
}

.bold {
  font-weight: bold;
}

.C999 {
  color: #999999;
}

.C333 {
  color: #333333;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fs18 {
  font-size: 18upx;
}

.fs21 {
  font-size: 21upx;
}

.pplis {
  display: flex;
  padding: 0 28upx;
  flex-wrap: wrap;
}

.ppli {
  margin-top: 20upx;
  margin-top: 20upx;
  padding: 5upx 60upx;
  /* font-size: 18upx; */
  font-size: 27upx;
  background-color: #f0f2f5;
  border-radius: 5upx;
}

.ppli + .ppli {
  margin-left: 20upx;
}

.ppfllis {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 28upx;
  flex-wrap: wrap;
  border-radius: 15upx;
  overflow: scroll;
}

.ppflli {
  margin-top: 20upx;
  padding: 5upx 30upx;
  /* font-size: 18upx; */
  font-size: 27upx;
  background-color: #f0f2f5;
  border-radius: 5upx;
}

.innerMaskBottom {
  width: 100%;
  position: absolute;
  height: 80upx;
  bottom: 0;
  left: 0;
}

.innerMaskBottom button {
  height: 80upx;
  line-height: 80upx;
  width: 50%;
  border: none;
  outline: none;
  border-radius: 0;
}

.innerMaskBottom1 {
  background-color: #d2d2d2;
  color: #666666;
  font-size: 21upx;
}

.innerMaskBottom2 {
  background-color: #ff4300;
  color: #ffffff;
  font-size: 21upx;
}

.jgInput {
  padding-left: 28upx;
  display: flex;
  flex-direction: row;
}

.jgInput input {
  border: none;
  border-radius: 5upx;
  text-align: center;
  background-color: #f0f2f5;
  width: 162upx;
  height: 43upx;
}

.inputC {
  position: relative;
  top: -5upx;
  padding: 0 15upx;
}

.sx {
  width: 30upx;
  height: 30upx;
  position: relative;
  top: 8upx;
  left: 5upx;
}

.xj {
  width: 20upx;
  height: 20upx;
  position: relative;
  top: 2upx;
  left: 5upx;
}

.mt {
  margin-top: 20upx;
}

.active1 {
  color: #fff;
  background-color: #ff4300;
}

.active2 {
  color: #fff;
  background-color: #ff4300;
}

.active3 {
  color: #fff;
  background-color: #ff4300;
}

.active11 {
  color: #ff4300;
}

.fs30 {
  /* font-size: 30upx */
  font-size: 45upx;
}

.fs26 {
  font-size: 39upx;
  /* font-size: 26upx */
}

.fs12 {
  font-size: 18upx;
  /* font-size: 12upx */
}

.fs16 {
  font-size: 24upx;
  /* font-size: 16upx */
}

.fs14 {
  font-size: 21upx;
  /* font-size: 14upx */
}

.fs15 {
  font-size: 22.5upx;
  /* font-size: 15upx */
}

.fs27 {
  font-size: 40.5upx;
  /* font-size: 27upx */
}

.fs18 {
  font-size: 27upx;
  /* font-size: 18upx */
}

.fs28 {
  font-size: 42upx;
  /* font-size: 28upx */
}

.fs10 {
  font-size: 15upx;
  /* font-size: 10upx */
}

.fs30 {
  font-size: 45upx;
  /* font-size: 28upx */
}

.fs24 {
  font-size: 36upx;
  /* font-size: 24upx */
}

.fs20 {
  font-size: 30upx;
  /* font-size: 20upx */
}

.fs22 {
  font-size: 33upx;
  /* font-size: 22upx */
}

.fs21 {
  font-size: 31.5upx;
  /* font-size: 21upx */
}

.is_tv {
  background-color: #ff4300;
  color: #ffffff;
  padding: 0 5rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}

.goodsbox {
  width: 100%;
  background-color: #fff;
  display: flex;
  position: relative;
  left: 0;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.goods1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 40rpx;
  line-height: 40rpx;
  background-color: #ff4300;
  z-index: 9;
  color: #fff;
  padding: 0 12rpx;
  font-size: 26rpx;
  border-top-left-radius: 12rpx;
}

.goodsimg {
  width: 260rpx;
  height: 260rpx;
  border-radius: 20rpx;
}

.goodslist {
  flex: 1;
  padding: 10rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
}

.goods2 {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.goods4 {
  color: #ff4300;
  font-size: 30rpx;
}

.goods3 {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
}
</style>
